<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>行程列表</title>
  <!-- import CSS -->
  <link rel="shortcut icon" href="../favicon.ico">
  <link rel="stylesheet" href="../plugins/ElementUI/index-2.3.9.css">
  <link href="../css/common.css" rel="stylesheet">
  <!-- import Vue before Element -->
  <script src="../plugins/ElementUI/vue-2.5.16.js" type="text/javascript"></script>
  <!-- import JavaScript -->
  <script src="../plugins/ElementUI/index-2.3.9.js" type="text/javascript"></script>
  <script src="../plugins/ElementUI/vue-resource.min.js"></script>
  <!-- map -->
  <script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=ePOIA9rln4os58j2HQnx3AW0Sdy9MiQv"></script>
  <!-- <script type="text/javascript" src="../js/LuShu.js"></script> -->
  <style>
    .row .alarm{
      background-color: #23c6c8;
      color: #fff;
      border-radius: 5px;
      padding: 8px 10px;
      float: left;
      margin: 10px;
    }
    .el-table__row{
      cursor: pointer;
    }
  </style>
</head>
<body>
  <div id="app" v-cloak v-show="appShow"  class="animated fadeInRight">
    <el-form ref="tripParames" :model="tripParames" label-width="80px" style="width: 900px">
      <el-row>
        <el-col :span="6">
          <el-form-item label="车牌号">
            <el-input v-model="tripParames.plateNo" clearable size="small"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="VIN码">
            <el-input v-model="tripParames.vin" clearable size="small"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="10">
          <el-form-item label="选择时间">
            <el-date-picker
              type="datetimerange"
              v-model="tripTimes"
              align="center"
              size="small"
              style="width:100%;font-size: 12px"
              start-placeholder="开始日期"
              end-placeholder="结束日期"
              value-format="yyyy-MM-dd HH:mm:ss"
              :default-time="['00:00:00', '23:59:59']">
            </el-date-picker>
          </el-form-item>
        </el-col>
        <el-col :span="2">
          <el-form-item>
            <el-button type="primary" @click="onSubmit" clearable size="small" v-show="resourceMap.queryVehicleInfo">&nbsp;&nbsp;查询&nbsp;&nbsp;</el-button>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>

    <br>
    <!-- table -->
    <el-table :data="tableData.list" border size="small" :max-height="windowHeight" style="width: 100%" >
      <el-table-column type="selection" width="55"></el-table-column>
      <el-table-column type="index" ></el-table-column>
      <el-table-column prop="plateNo" label="车牌号"> </el-table-column>
      <el-table-column prop="vin" label="车架号" width=""></el-table-column>
      <el-table-column prop="startTime" label="开始时间"></el-table-column>
      <el-table-column prop="endTime" label="结束时间"></el-table-column>
      <el-table-column label="操作">
        <template slot-scope="scope">
          <el-button size="mini" type="primary"  @click="handleInfo(scope.row)">查看行程</el-button>
        </template>
      </el-table-column>
    </el-table>
    <br>
    <!-- page -->
    <el-pagination
      background
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page.sync="tripParames.page"
      :page-sizes="[20,50,100,150,200]"
      :page-size="tripParames.pageSize"
      layout="sizes, prev, pager, next"
      :total="tableData.totalCount">
    </el-pagination>
    <!------------------------- dialog trips start ----------------------->
    <el-dialog
      title="行程轨迹"
      :visible.sync="dialogVisible">
        <div id="map_canvas" style="height:500px"></div>                
    </el-dialog>
    <!------------------------- dialog trips end ----------------------->
  </div>
</body>
  <script src="../plugins/Underscore/underscore-min.js"></script>
  <script src="../js/ApiRequest.js"></script>
  <script src="../js/mars2baidu.js"></script>
  <script>
    var vm=new Vue({
      el: '#app',
      data: function() {
        return {
          appShow:false,
          resourceMap:storageLocal.getName('vehicle'),
          tableData: [],
          carVehicleForm: {},
          formLabelWidth:'120px',
          windowHeight:(window.innerHeight||(document.documentElement&&document.documentElement.clientHeight)||document.body.clientHeight) - 170,
          tripParames:{
            page:1,
            pageSize:15,
            vin:"",
            startTime:"",
            endTime:"",
            plateNo:"",
            orgId:""
          },
          tripTimes:"",
          dialogVisible:false,
          alarmParame:{//报警参数
            page:1,
            pageSize:10,            
          },
          gridData:[],
          gridItem:{},
          responsePoints:"",
          MAP:null//地图容器
        }
      },
      mounted:function(){
        this.$nextTick(function(){
          this.requestModel()
        })
      },
      updated:function(){
        this.appShow = true
      },
      methods: {
          onSubmit:function() {//查询
            this.requestModel()
          },         
          handleSizeChange:function(val) {//table-分页
            this.requestModel()
          },
          handleCurrentChange:function(val) {//table-分页
            this.requestModel()
          },
          requestModel:function(){
            var data = {
              vin:this.tripParames.vin,
              startTime:this.tripParames.startTime,
              endTime:this.tripParames.endTime,
              plateNo:this.tripParames.plateNo,
              orgId:this.tripParames.orgId,
              page:this.tripParames.page,
              pageSize:this.tripParames.pageSize
            }
            resourceRequst("/trip/queryTripList",data,function(res){
                vm.tableData = res
            })
          },
          // 根据时间和车架号查询车辆的所有行程记录
          handleInfo:function(row){
            var _this = this;
            var data = {
              vin:row.vin,
              startTime:row.startTime,
              endTime:row.endTime,
            }
            resourceRequst("/location/queryTraceByVinAndTime",data,function(res){
              // _this.dialogVisible = true
              // if(document.getElementById("map_canvas")){
              //   _this.responsePoints = res.getResult;
              // }else{                
              //   var setIn = setInterval(function() {
              //     var dom = document.getElementById("map_canvas");              
              //     if(dom){
              //       clearInterval(setIn) 
              //       var state = _this.initMap()
              //       if(state){
              //         _this.responsePoints = res.getResult;
              //       }
              //     }              
              //   }, 300);
              // }
              _this.responsePoints = res.getResult;
            })
          },
          initMap:function(){
            var map = new BMap.Map("map_canvas",{enableMapClick:false});    // 创建Map实例
            map.centerAndZoom(new BMap.Point(108.897597,34.457814),6);  // 初始化地图,设置中心点坐标和地图级别	  
            map.addControl(new BMap.MapTypeControl({
              mapTypes:[ BMAP_NORMAL_MAP,  BMAP_HYBRID_MAP]
            }));
            map.enableScrollWheelZoom(true);     //开启鼠标滚轮缩放
            this.MAP = map;
            return true
          },
          showMap:function(arrPois){
            var _this = this;
            this.dialogVisible = true
            var setIn = setInterval(function() {
              var dom = document.getElementById("map_canvas");              
              if(dom){
                clearInterval(setIn)   
                var state = _this.initMap()    
                if(state){                 
                  _this.MAP.clearOverlays();
                  // 画线
                  _this.MAP.addOverlay(new BMap.Polyline(arrPois, {strokeColor: '#111'}));  
                  _this.MAP.setViewport(arrPois);
                }          
              }              
            }, 50);
          }
        },
        watch:{
          tripTimes:function(val){
            if(val){
              this.tripParames.startTime = val[0]
              this.tripParames.endTime = val[1]
            }else{
              this.tripParames.startTime = ""
              this.tripParames.endTime = ""
            }
          },
          responsePoints:function(points){
            var map = this.MAP;
            if(points.length === 0){
              this.$message('本时间段没有查询到轨迹信息');
              if(map){
                map.clearOverlays();
                map.centerAndZoom(new BMap.Point(108.897597,34.457814),6);
              }              
            }else{
              var arrPois = _.map(points,function(item,index){
                var bdpoint = coordtransform.wgs84togbd09(item.lng,item.lat)
                return new BMap.Point(bdpoint[0],bdpoint[1]);
              })              
              this.showMap(arrPois)
            }
          }
        }
    })
  </script>
</html>